<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
  <title>华为音乐</title>
  <link rel="stylesheet" href="src/scss/index.scss">
</head>
<body>
  <div id="player">
    <div class="header">
      <h1>有些事现在不做一辈子</h1>
      <p>五月天-第二人生</p>
      <div class="balls">
        <span class="current"></span>
        <span></span>
    </div>
  </div>
    <div class="panels panel1">
      <div class="panel-effect">
        <div class="effect">
          <div class="effect-1"></div>
          <div class="effect-2"></div>
          <div class="effect-3"></div>
        </div>
        <div class="lyric">
          <p class="current">那么你和人们的不同 就看你怎么活</p>
          <p>想象着你的白发 皱纹 紧贴着你的轮廓</p>
        </div>
      </div>
      <div class="panel-lyrics">
        <div class="container">
          <p>1那么你和人们的不同 就看你怎么活</p>
          <p>2想象着你的白发 皱纹 紧贴着你的轮廓</p>
          <p>3那么你和人们的不同 就看你怎么活</p>
          <p>4想象着你的白发 皱纹 紧贴着你的轮廓</p>
          <p>5那么你和人们的不同 就看你怎么活</p>
          <p>6想象着你的白发 皱纹 紧贴着你的轮廓</p>
          <p>7那么你和人们的不同 就看你怎么活</p>
          <p>8想象着你的白发 皱纹 紧贴着你的轮廓</p>
          <p>9那么你和人们的不同 就看你怎么活</p>
          <p>10想象着你的白发 皱纹 紧贴着你的轮廓</p>
          <p>11那么你和人们的不同 就看你怎么活</p>
          <p>12想象着你的白发 皱纹 紧贴着你的轮廓</p>
          <p>13那么你和人们的不同 就看你怎么活</p>
          <p class="current">14想象着你的白发 皱纹 紧贴着你的轮廓</p>
          <p>15那么你和人们的不同 就看你怎么活</p>
          <p>16想象着你的白发 皱纹 紧贴着你的轮廓</p>
          <p>17那么你和人们的不同 就看你怎么活</p>
        </div>
       
      </div>
  </div>
  <div class="footer">
    <div class="buttons">
      <svg class="btn-like" ><use xlink:href="#icon-like"/></svg>
      <svg class="btn-download" ><use xlink:href="#icon-download"/></svg>
      <svg class="btn-share" ><use xlink:href="#icon-share"/></svg>
      <svg class="btn-comment" ><use xlink:href="#icon-comment"/></svg>
    </div>
    <div class="bar-area">
      <span class="time-start">0:00</span>
      <span class="time-end">0:00</span>
      <div class="bar">
        <div class="progress"></div>
      </div>
    </div>
    <div class="actions">
      <svg class="btn-order"><use xlink:href="#icon-circle"/></svg>
      <svg class="btn-pre"><use xlink:href="#icon-pre"/></svg>
      <svg class="btn-play-pause pause"><use xlink:href="#icon-play"/></svg>
      <svg class="btn-next"><use xlink:href="#icon-next"/></svg>
      <svg class="btn-music-list"><use xlink:href="#icon-list"/></svg>
    </div>
</div>
</div>
  <script src="src/js/index.js"></script>
  
</body>
</html>